<template>
  <div class="common_modal clearfix">
    <div class="viewBox noticeList">
      <div class="title">最新通知</div>
      <ul>
        <li class="flex">
          <span class="flex-1">最新天气预报通知</span>
          <span class="date">2022-02-12</span>
        </li>
         <li class="flex">
          <span class="flex-1">最新天气预报通知</span>
          <span class="date">2022-02-12</span>
        </li>
         <li class="flex">
          <span class="flex-1">最新天气预报通知</span>
          <span class="date">2022-02-12</span>
        </li>
         <li class="flex">
          <span class="flex-1">最新天气预报通知</span>
          <span class="date">2022-02-12</span>
        </li>
         <li class="flex">
          <span class="flex-1">最新天气预报通知</span>
          <span class="date">2022-02-12</span>
        </li>
         <li class="flex">
          <span class="flex-1">最新天气预报通知</span>
          <span class="date">2022-02-12</span>
        </li>
         <li class="flex">
          <span class="flex-1">最新天气预报通知</span>
          <span class="date">2022-02-12</span>
        </li>
      </ul>
    </div>
    <div class="viewBox" id="lineView"></div>
    <div class="viewBox" id="barView"></div>
    <div class="viewBox" id="columnarView"></div>
    
  </div>
</template>

<script>
import * as echarts from "echarts";
export default {
  name: "home",
  data() {
    return {};
  },
  mounted() {
    this.setLineView();
    this.setBarView();
    this.setMapView()
  },
  methods: {
    //获取数据
    setLineView() {
      const myChart = echarts.init(document.getElementById("lineView"));
      myChart.setOption({
        title: {
          text: "一周温度检测",
        },
        tooltip: {
          trigger: "axis",
        },
        legend: {},
        toolbox: {
          show: false,
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
        },
        yAxis: {
          type: "value",
          axisLabel: {
            formatter: "{value} °C",
          },
        },
        series: [
          {
            name: "最高温度",
            type: "line",
            data: [10, 11, 13, 11, 12, 12, 9],
            markPoint: {
              data: [
                { type: "max", name: "Max" },
                { type: "min", name: "Min" },
              ],
            },
            markLine: {
              data: [{ type: "average", name: "Avg" }],
            },
          },
          {
            name: "最低温度",
            type: "line",
            data: [1, -2, 2, 5, 3, 2, 0],
            markPoint: {
              data: [{ name: "周最低", value: -2, xAxis: 1, yAxis: -1.5 }],
            },
            markLine: {
              data: [
                { type: "average", name: "Avg" },
                [
                  {
                    symbol: "none",
                    x: "90%",
                    yAxis: "max",
                  },
                  {
                    symbol: "circle",
                    label: {
                      position: "start",
                      formatter: "Max",
                    },
                    type: "max",
                    name: "最高点",
                  },
                ],
              ],
            },
          },
        ],
      });
    },
    setBarView() {
      const myChart = echarts.init(document.getElementById("barView"));
      myChart.setOption({
         title: {
          text: "一周降雨统计",
          // left: "left",
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            crossStyle: {
              color: "#999",
            },
          },
        },
        toolbox: {
          show: false,
        },
        legend: {
          data: ["蒸发量", "降雨量", "温度"],
        },
        xAxis: [
          {
            type: "category",
            data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
            axisPointer: {
              type: "shadow",
            },
          },
        ],
        yAxis: [
          {
            type: "value",
            name: "降雨量",
            min: 0,
            max: 250,
            interval: 50,
            axisLabel: {
              formatter: "{value} ml",
            },
          },
          {
            type: "value",
            name: "温度",
            min: 0,
            max: 25,
            interval: 5,
            axisLabel: {
              formatter: "{value} °C",
            },
          },
        ],
        series: [
          {
            name: "蒸发量",
            type: "bar",
            tooltip: {
              valueFormatter: function (value) {
                return value + " ml";
              },
            },
            data: [
              2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4,
              3.3,
            ],
          },
          {
            name: "降雨量",
            type: "bar",
            tooltip: {
              valueFormatter: function (value) {
                return value + " ml";
              },
            },
            data: [
              2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0,
              2.3,
            ],
          },
          {
            name: "温度",
            type: "line",
            yAxisIndex: 1,
            tooltip: {
              valueFormatter: function (value) {
                return value + " °C";
              },
            },
            data: [
              2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2,
            ],
          },
        ],
      });
    },
    setMapView() {
      const myChart = echarts.init(document.getElementById("columnarView"));
      const option = {
        title: {
          text: "天气统计",
          subtext: "Fake Data",
          // left: "left",
        },
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b} : {c} ({d}%)",
        },
        legend: {
          bottom: 10,
          left: "center",
          data: ["南京", "苏州", "无锡", "南通", "徐州"],
        },
        series: [
          {
            type: "pie",
            radius: "65%",
            center: ["50%", "50%"],
            selectedMode: "single",
            data: [
              {
                value: 1548,
                name: "南京",
              },
              { value: 735, name: "苏州" },
              { value: 510, name: "无锡" },
              { value: 434, name: "南通" },
              { value: 335, name: "徐州" },
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
          },
        ],
      };
      myChart.setOption(option);
    },
  },
};
</script>
<style lang="less" scoped>
.viewBox {
  width: 50%;
  float: left;
  height: 420px;
}
.noticeList{
  
  .title{
    font-size:18px;
    font-weight: bold;
    color:#333;
  }
  ul{
    padding:10px;
  }
  li{
    font-size:14px;
    padding:0 10px;
    line-height:40px;
    border-bottom: 1px solid #e6e6e6;
    .date{
      width:120px;
      color:#999; 
      text-align: right;
    }
  }
}
</style>
